﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<title></title>
		<style type="text/css">
			/*#pic{
				width: 400px;
				height: 400px;
				margin: 0 auto;
			}*/
			#pic1{
				width: 400px;
				height: 400px;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!--<div class="carousel slide" id="pic">
				<!--小圆点-
				<ol class="carousel-indicators">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ol>
		            轮播图
		        <div class="carousel-inner">
		        	<div class="item active  ">
		        	<img src="img/1.jpeg"/>	
		        	</div>
		        	<div class="item  ">
		        		<img src="img/2.jpeg"/>	
		        	</div>
		        	<div class="item  ">
		        		<img src="img/3.jpeg"/>	
		        	</div>
		        	<div class="item  ">
		        		<img src="img/4.jpeg"/>	
		        	</div>
		        		<div class="item  ">
		        		<img src="img/5.jpeg"/>	
		        	</div>
		        	
		        </div>
		        <!--左右按钮
		        
		        <a href="#pic" class="carousel-control left" data-slide = "prev"><</a>
		        <a href="#pic" class="carousel-control right" data-slide = "next">></a>
			</div>-->
			<!--<div class="carousel slide" id="pic1">
				 -小圆点
				 <ol class="carousel-indicators" data-interval="400" data-ride="carousel">
				 	<li class="active"></li>
				 	<li></li>
				 	<li></li>
				 	<li></li>
				 </ol>
		   轮播图
		      <div class="carousel-inner">
		   	<div class="item active">
		   		<img src="img/1.jpeg"/>
		   		<div class="carousel-caption">
		   			<h3>标题内容</h3>
		   			<p>其他内容</p>
		   		</div>
		   	</div>
		   	<div class="item">
		   		<img src="img/2.jpeg"/>
		   		<div class="carousel-caption">
		   			<h3>标题内容</h3>
		   			<p>其他内容</p>
		   		</div>
		   	</div>
		   	<div class="item">
		   		<img src="img/3.jpeg"/>
		   		<div class="carousel-caption">
		   			<h3>标题内容</h3>
		   			<p>其他内容</p>
		   		</div>
		   	</div>
		   	
		   	<div class="item">
		   		<img src="img/4.jpeg"/>
		   		<div class="carousel-caption">
		   			<h3>标题内容</h3>
		   			<p>其他内容</p>
		   		</div>
		   	</div>
		   	<div class="item">
		   		<img src="img/5.jpeg"/>
		   		<div class="carousel-caption">
		   			<h3>标题内容</h3>
		   			<p>其他内容</p>
		   		</div>
		   	</div>
		   </div>
		  左右按钮
		   <a href="#pic1" class="carousel-control left" data-slide="prev"><</a>
		   	 <a href="#pic1" class="carousel-control right" data-slide="next">></a>
			</div>-->
		  
		  
		  
		  
		  <!--
		  	轮播图制作过程
		  	先给个div 给个属性carousel 一个id
		  
		  	
		  	
		  	
		  	
		  -->
		  <div class="carousel slide" id="pic1"  data-intervel="400" data-ride="carousel">
		  	
		  	<ol class="carousel-indicators">
		  		<li class="active"></li>
		  		<li></li>
		  		<li></li>
		  		<li></li>
		  		<li></li>
		  	</ol>
		  	<div class="carousel-inner">
		  		<div class="item active">
		  		<img src="img/1.jpeg"/>	
		  		<div class="carousel-caption">
		  			<h3>文字标题</h3>
		  			<p>文字内容</p>
		  		</div>
		  		</div>
		  	
		  		<div class="item">
		  		<img src="img/2.jpeg"/>	
		  		<div class="carousel-caption">
		  			<h3>文字标题</h3>
		  			<p>文字内容</p>
		  		</div>
		  		</div>
		  		
		  		<div class="item">
		  		<img src="img/3.jpeg"/>	
		  		<div class="carousel-caption">
		  			<h3>文字标题</h3>
		  			<p>文字内容</p>
		  		</div>
		  		</div>
		  		<div class="item">
		  		<img src="img/4.jpeg"/>	
		  		<div class="carousel-caption">
		  			<h3>文字标题</h3>
		  			<p>文字内容</p>
		  		</div>
		  		</div>
		  		<div class="item">
		  		<img src="img/5.jpeg"/>	
		  		<div class="carousel-caption">
		  			<h3>文字标题</h3>
		  			<p>文字内容</p>
		  		</div>
		  		</div>
		  		
		  	</div>
		  	<a href="#pic1" class="carousel-control left" data-slide="prev"><</a>
		  	<a href="#pic1" class="carousel-control right" data-slide="next">></a>
		  </div>
		  
		  
		  
		  
		  
		  
		  
		</div>
		
		<script src="js/jquery-2.1.0.js"></script>
        <script src="js/bootstrap.js"> </script>
	</body>
</html>
